<template>
	<view class="notice-bar">
		<swiper class="swiper" :autoplay="autoplay" :vertical="true" :circular="true" interval="2000" disable-touch>
			<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
				<!-- #ifdef APP-NVUE -->
				<image class="bg" src="@/static/image/scroll-bg.png" mode="widthFix"></image>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<image class="header-image" v-if="item.headimg" :src="item.headimg" mode="widthFix"></image>
				<image class="header-image" v-else src="@/static/image/avatar.png" mode="widthFix"></image>
				<!-- #endif -->
				<text class="text">{{item.nickname}}抽中了{{item.box_level}}</text>
				<image class="good" v-if="item.sku_img" :src="shopImg(item.sku_img+'?x-oss-process=image/resize,h_60,w_60,m_fixed')" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import util from '@/common/js/util.js';
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			autoplay:{
				type:Boolean,
				default:true
			}
		},
		methods: {
			shopImg(img) {
				return util.img(img);
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	@import "../base64.scss";
	/* #endif */

    .notice-bar{
		display: flex;
		flex-direction: row;
	}

	.swiper {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		flex: 1;
		margin-left: 12rpx;
		width: 688rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
	}

	.swiper-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		background: $scrollBg;
		background-size: 100%;
		/* #endif */
		position: relative;
		// background: linear-gradient(90deg, rgba(244, 71, 221, 0.7), rgba(0, 168, 255, 0.7), rgba(83, 218, 250, 0.7));
		// background: url(../../../../static/image/scroll-bg.png);
		border-radius: 27rpx;
	}
	.bg{
		width: 608rpx;
		height: 60rpx;
		position: absolute;
	}
	.header-image {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 22rpx;
	}

	.text {
		color: #FFFFFF;
		font-size: 21rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		width: 195rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* #ifndef APP-NVUE */
		display: block;
		white-space: nowrap;
		/* #endif */
	}

	.good {
		width: 32rpx;
		height: 36rpx;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-left: 8rpx;
	}
</style>
